import React, {Component} from 'react';
import {Platform, StyleSheet, Text,FlatList, View} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            filmList:[{"id":10,"filmName":"小猪佩奇过大年","boxOffice":300000.0,"boxOfficeStr":"30.0万"}]
        };
    }
    render() {
    return (
      <View style={styles.container}>

     <FlatList
         renderItem={this._renderItem}
         data={this.state.filmList}
         ItemSeparatorComponent={this._itemSeparatorComponent}
         keyExtractor={this._keyExtractor}
               />
     </View>
    );
  }
    _itemSeparatorComponent=()=>{
        return(
            <View style={{height:1,backgroundColor: "#5f5f5f"}}></View>
        )
    }
    _renderItem = ({item}) => {
        return(
            <View style={{flexDirection:"row",backgroundColor:"#fefefe"}}>
                <View style={styles.eachView}><Text>{item.id}</Text></View>
                <View style={styles.eachView}><Text>{item.filmName}</Text></View>
                <View style={styles.eachView}><Text>{item.boxOfficeStr}</Text></View>
            </View>
        )
    }
        _keyExtractor = (item, index) => item.id.toString();
  componentDidMount() {
      fetch("http://169.254.230.118:8080/test",
          {
              method: "post",
              mode: 'cors',
              headers: {
                  "Content-Type": "application/json"
              },
              // body: JSON.stringify({})

          })
          .then(response => response.json())
          .then(mydate => {
              this.setState({
                  filmList:mydate
               })
          })
          .catch(
              (err)=>{
            alert(err)
          })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },eachView:{
      width:200,
        marginRight:20,
    }
});
